<script lang='ts'>
// @ts-nocheck
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { DomEditor } from '@wangeditor/editor'
import "@wangeditor/editor/dist/css/style.css"
import { Boot } from '@wangeditor/editor'
import markdownModule from '@wangeditor/plugin-md'
import ErrorReplaceModule, {errorReplace} from "./ErrorReplace/ErrorReplaceModule.tsx";
import {IEditorConfig} from "@wangeditor/core/dist/core/src/config/interface";
import request from "@/utils/request";

Boot.registerModule(markdownModule)
Boot.registerModule(ErrorReplaceModule)

export default {
  name: 'Wangeditor',
  components: { Editor, Toolbar },
  props: {
    modelValue:String,
    disabled:Boolean,
  },
  watch: {
    disabled: {
      immediate: true,
      handler() {
        this.$nextTick(() => {
          if(this.disabled) {
            this.editor.disable()
          } else {
            this.editor.enable()
          }
        })
      }
    }
  },
  computed: {
    asyncValue: {
      get() {
        return this.modelValue
      },
      set(val) {
        this.$emit('update:modelValue',val)
      }
    }
  },
  data() {
    return {
      editor: null,
      toolbarConfig: {
        excludeKeys: [
          // 'insertVideo',
          // 'group-video'
        ]
      },
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadImage: {
            // 小于该值就插入 base64 格式（而不上传），默认为 0
            // base64LimitSize: 1024 * 1024 * 1024,
            // 自定义上传
            async customUpload(file, insertFn) {
              const formData = new FormData()
              formData.append('file', file)
              let res = await request({
                url: "/system/oss/upload",
                method: "POST",
                data: formData,
                timeout: 0,
              })
              insertFn(res.data.url,res.data.fileName)
            }
          },
          uploadVideo: {
            async customUpload(file, insertFn) {
              const formData = new FormData()
              formData.append('file', file)
              let res = await request({
                url: "/system/oss/upload",
                method: "POST",
                data: formData,
                timeout: 0,
              })
              insertFn(res.data.url,res.data.url)
            }
          }
        }
      } as IEditorConfig,
      mode: 'default', // or 'simple'
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      this.editor.on(errorReplace.type,(...args)=>{
        this.$emit(errorReplace.type,...args)
      })
      // this.$nextTick(()=>{
      //   const toolbar = DomEditor.getToolbar(editor)
      //
      //   const curToolbarConfig = toolbar.getConfig()
      //   console.log(curToolbarConfig.toolbarKeys) // 当前菜单排序和分组
      // })
    },
  },
  beforeUnmount() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
}
</script>

<template>
  <div class="Wangeditor">
    <Toolbar
      class="Toolbar"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
      v-if="!disabled"
    />
    <Editor
      class="Editor"
      v-model="asyncValue"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
    />
  </div>
</template>

<style scoped lang="scss">
.Wangeditor {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--w-e-toolbar-border-color);
  width: 100%;
  min-height: 600px;

  .Toolbar {
    border-bottom: 1px solid var(--w-e-toolbar-border-color);
  }

  .Editor {
    overflow: auto;
  }
  ::v-deep{
    .zhixinErrorReplace{
      border: 1px dashed red;
      position: relative;
      display: inline-block;
      .errorReplacePanel{
        z-index: 9;
        background-color: white;
        display: none;
        cursor: pointer;
        position: absolute;
        bottom: -100%;
        left: 0px;
        .errorReplaceDiv{
          white-space: nowrap;
        }
      }
      &:hover{
        .errorReplacePanel{
          display: block;
        }
      }
    }
  }
}
</style>
